<!--实时采集数量  -->
<template>
	<border cardTitle="实时采集数量"><Chart :optionData="option_column" style="height: 100%"></Chart></border>
</template>

<script>
import border from '../border.vue';
import StatisticsMixins from '../../StatisticsMixins';
let color = ['#2467ED', '#16E4CF', '#EBA62C'];
import { bigScreenApi } from '@/api/index';

export default {
	components: { border },
	mixins: [StatisticsMixins],
	data() {
		return {
			option_column: {
				color: color,
				tooltip: {
					show: true
				},
				toolbox: {
					show: false
				},
				legend: {
					show: true,
					type: 'scroll',
					orient: 'vertical',
					left: '60%',
					align: 'left',
					top: 'middle',
					itemWidth: 12,
					itemHeight: 12,
					textStyle: {
						fontSize: 14,
						color: '#fff'
					}
				},
				series: {
					name: '',
					type: 'pie',
					clockWise: false,
					center: ['25%', '50%'],
					radius: ['50%', '85%'],
					hoverAnimation: false,
					itemStyle: {
						normal: {
							label: {
								show: false,
								position: 'outside',
								overflow: 'none',
								color: 'inherit',
								align: 'center',
								rich: {
									a1: {
										align: 'center',
										padding: [-20, 0, 10, 0],
										fontSize: 14,
										color: '#7E848A'
									},
									green: { color: '#06706C', fontSize: 16, fontWeight: 'bold', padding: [0, 10, -20, 0] }
								},
								formatter: '{a1|{b}：}\n{green|{c}头}'
							},
							labelLine: {
								length: 30,
								length2: 10,
								show: true,
								lineStyle: {
									width: 1,
									color: '#7E848A'
								}
							}
						}
					},
					data: [
						{ legendname: '公牛', name: '公牛 15', value: 15 },
						{ legendname: '母牛', name: '母牛 40', value: 40 },
						{ legendname: '犊牛', name: '犊牛 40', value: 40 }
					]
				}
			}
		};
	},
	props: {
		level: {
			type: [String, Number],
			default: 0
		},
		cityId: {
			type: [String, Number],
			default: ''
		}
	},
	watch: {
		level: {
			handler(newV, oldV) {
				this.getInfo();
			},
			immediate: true
		}
	},
	created() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			let data = [
				{ legendname: '公牛', name: '公牛 15', value: 15 },
				{ legendname: '母牛', name: '母牛 40', value: 40 },
				{ legendname: '犊牛', name: '犊牛 40', value: 40 }
			];
			this.$postAction(bigScreenApi.collectCount, {
				xzqhbm: this.level > 1 ? this.cityId : '',
				level: this.level
			}).then(res => {
				if (res && res.code == 1) {
					let cowData = res.data;
					this.option_column.series.data = data.map(item => {
						console.log(item);
						let subName = '';
						let value;
						if (item.legendname == '公牛') {
							subName =
								item.legendname +
								' ' +
								(cowData.maleCount > 10000 ? cowData.maleCount.toFixed(2) : cowData.maleCount) +
								(cowData.maleCount > 10000 ? '万' : '') +
								'头';
							value = cowData.maleCount > 10000 ? cowData.maleCount.toFixed(2) : cowData.maleCount;
						} else if (item.legendname == '母牛') {
							subName =
								item.legendname +
								' ' +
								(cowData.femaleCount > 10000 ? cowData.femaleCount.toFixed(2) : cowData.femaleCount) +
								(cowData.femaleCount > 10000 ? '万' : '') +
								'头';
							value = cowData.femaleCount > 10000 ? cowData.femaleCount.toFixed(2) : cowData.femaleCount;
						} else {
							subName =
								item.legendname +
								' ' +
								(cowData.calfCount > 10000 ? cowData.calfCount.toFixed(2) : cowData.calfCount) +
								(cowData.calfCount > 10000 ? '万' : '') +
								'头';
							value = cowData.calfCount > 10000 ? cowData.calfCount.toFixed(2) : cowData.calfCount;
						}
						console.log(subName, value);
						return {
							legendname: item.legendname,
							name: subName,
							value: value
						};
					});
				}
			});
		}
	}
};
</script>

<style></style>
